<template>
  <div class="app-container" >

    <el-row>
      <el-col :span="6"><i class="el-icon-s-order" style="color: #999999;margin-bottom: 20px;"></i><span style="margin-left: 5px;color: #999999;">基本信息</span></el-col>
    </el-row>
    <div style="background-color:  #FAFAFA;padding: 20px;">
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="150px" >
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item label="客户分类:" prop="customerClassify">
              <dict-tag :options="dict.type.zxcrm_customer_classify" :value="form.customerClassify"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司名称:" prop="companyName" v-if="form.customerClassify == 1 || form.customerClassify == 2 || form.customerClassify == 3">
              {{form.companyName}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item label="客户简称:" prop="companyAbbreviation" v-if="form.customerClassify == 1 || form.customerClassify == 2">
              {{form.companyAbbreviation}}
            </el-form-item>
            <el-form-item label="供应商简称:" prop="supplierAbbreviation" v-if="form.customerClassify == 3 ">
              {{form.supplierAbbreviation}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户等级:" prop="customerLevel" v-if="form.customerClassify == 1 || form.customerClassify == 2">
              <dict-tag :options="dict.type.zxcrm_customer_level" :value="form.customerLevel"/>
            </el-form-item>
            <el-form-item label="供应商类型:" prop="supplierType" v-if="form.customerClassify == 3">
              <dict-tag :options="dict.type.zxcrm_customer_type" :value="form.customerType"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item label="经营地址:" prop="operateAddress" v-if="form.customerClassify == 1 || form.customerClassify == 2 || form.customerClassify == 3">
              {{form.operateAddress}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实际控制人:" prop="actualControllerId" v-if="form.customerClassify == 1 || form.customerClassify == 2 || form.customerClassify == 3">
              {{contactMap[form.actualControllerId]}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item label="疫苗部门负责人:" prop="vaccineDepartmentHeadId" v-if="form.customerClassify == 1">
              {{contactMap[form.vaccineDepartmentHeadId]}}
            </el-form-item>
            <el-form-item label="采购负责人:" prop="purchaseHeadId" v-if="form.customerClassify == 2">
              {{contactMap[form.purchaseHeadId]}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购对接人:" prop="purchaseDockingId" v-if="form.customerClassify == 1 || form.customerClassify == 2 ">
              {{contactMap[form.purchaseDockingId]}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item label="财务:" prop="financeId" v-if="form.customerClassify == 1 || form.customerClassify == 2 || form.customerClassify == 3">
            {{contactMap[form.financeId]}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属地区:" prop="area" v-if="form.customerClassify == 1 || form.customerClassify == 2">
              {{form.area}}
            </el-form-item>
            <el-form-item label="供应商来源:" prop="supplierSource " v-if="form.customerClassify == 3">
              <dict-tag :options="dict.type.zxcrm_supplier_source" :value="form.supplierSource"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item label="客户类型:" prop="customerType" v-if="form.customerClassify == 1 || form.customerClassify == 2">
              <dict-tag :options="dict.type.zxcrm_customer_type" :value="form.customerType"/>
            </el-form-item>
            <el-form-item label="供应商状态:" prop="supplierStatus" v-if="form.customerClassify == 3">
              <dict-tag :options="dict.type.zxcrm_supplier_status" :value="form.supplierStatus"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主销产品(疫苗):" prop="mainSalesProductVaccine" v-if="form.customerClassify == 1 ">
              <dict-tag :options="dict.type.zxcrm_main_sales_product" :value="form.mainSalesProduct"/>
            </el-form-item>
            <el-form-item label="主销产品:" prop="mainSalesProduct" v-if=" form.customerClassify == 2 || form.customerClassify == 3">
               {{form.mainSalesProduct}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item label="库管:" prop="warehouseOperatorId" v-if="form.customerClassify == 1">
              {{contactMap[form.warehouseOperatorId]}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用者:" prop="userId" v-if="form.customerClassify == 1 || form.customerClassify == 2">
              {{contactMap[form.userId]}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="gutter">
          <el-col :span="24">
            <el-form-item label="竞品:" prop="competitor" v-if="form.customerClassify == 1 || form.customerClassify == 2 || form.customerClassify == 3">
              <div v-html="form.competitor"></div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item label="客户关系:" prop="customerReloationship" v-if="form.customerClassify == 1 || form.customerClassify == 2">
              <dict-tag :options="dict.type.zxcrm_customer_relationship" :value="form.customerReloationship"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户内部组织关系:" prop="customerOrganizationalRelationship" v-if="form.customerClassify == 1 || form.customerClassify == 2">
              {{form.customerOrganizationalRelationship}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item label="客户状态:" prop="customerStatus" v-if="form.customerClassify == 2">
              <dict-tag :options="dict.type.zxcrm_customer_status" :value="form.customerStatus"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户来源:" prop="customerSource" v-if="form.customerClassify == 2">
              <dict-tag :options="dict.type.zxcrm_customer_source" :value="form.customerSource"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item label="客户成交卡点分析:" prop="customerTransationAnalysis" v-if="form.customerClassify == 2">
              {{form.customerTransationAnalysis}}
            </el-form-item>
            <el-form-item label="供应商政策支持:" prop="supplierPolicySupport" v-if="form.customerClassify == 3">
               {{form.supplierPolicySupport}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="特殊要求或条件:" prop="specialRequirement" v-if="form.customerClassify == 2 || form.customerClassify == 3">
               {{form.specialRequirement}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item label="回款周期:" prop="paymentCycle" v-if="form.customerClassify == 2">
              <dict-tag :options="dict.type.zxcrm_payment_cycle" :value="form.paymentCycle"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结算方式(药品):" prop="medicinePaymentMethod" v-if="form.customerClassify == 2">
              <dict-tag :options="dict.type.zxcrm_medicine_payment_method" :value="form.medicinePaymentMethod"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item label="销售对接人:" prop="saleContactId" v-if="form.customerClassify == 3">
               {{contactMap[form.saleContactId]}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="销售负责人:" prop="saleHeadId" v-if="form.customerClassify == 3">
              {{contactMap[form.saleHeadId]}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item label="供应商等级:" prop="supplierLevel" v-if="form.customerClassify == 3">
              <dict-tag :options="dict.type.zxcrm_supplier_level" :value="form.supplierLevel"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商内部组织关系:" prop="supplierOrganizationalRelationship" v-if="form.customerClassify == 3">
               {{form.supplierOrganizationalRelationship}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item label="贷款周期:" prop="loanCycle" v-if="form.customerClassify == 3">
               {{form.loanCycle}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结算方式(供应商):" prop="supplierPaymentMethod" v-if="form.customerClassify == 3">
              <dict-tag :options="dict.type.zxcrm_supplier_payment_method" :value="form.supplierPaymentMethod"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item label="其他:" prop="other" v-if="form.customerClassify == 1 || form.customerClassify == 2 || form.customerClassify == 3">
              {{form.other}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓储配送:" prop="warehouseDelivery" v-if="form.customerClassify == 2 || form.customerClassify == 3">
              {{form.warehouseDelivery}}
            </el-form-item>
            <el-form-item label="接种量:" prop="inoculationAmount" v-if="form.customerClassify == 1">
              {{form.inoculationAmount}}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
        </el-form>
    </div>
    <el-row>
      <el-col :span="6"><i class="el-icon-s-order" style="color: #999999;margin: 20px 0 20px;"></i><span style="margin-left: 5px;color: #999999;">系统信息</span></el-col>
    </el-row>
    <div style="background-color:  #FAFAFA;padding: 20px;">
      <el-form ref="basicInfoForm" :model="form"  label-width="180px" label-position="left">
        <el-row>
          <el-col :span="12">
            <el-form-item label="曾用名:" prop="contactId">
              {{form.contactId}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属部门:" prop="contactId">
              {{form.contactId}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="负责人:" prop="createBy">
               {{contactMap[form.createBy]}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最后跟进人:" prop="contactId">
              {{form.contactId}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="最后跟进时间:" prop="contactId">
              {{form.finallyFollow}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="	下次联系时间:" prop="contactId">
              {{form.nextContactTime}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="创建人:" prop="createBy">
               {{contactMap[form.createBy]}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间:" prop="createTime">
              {{form.createTime}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="最后修改时间:" prop="updateTime">
              {{form.updateTime}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="录入方式:" prop="inputMethod">
              <dict-tag :options="dict.type.zxcrm_medicine_input_method" :value="form.inputMethod"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="成交时间:" prop="dealTime">
              {{form.dealTime}}
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
        </el-form>
    </div>
  </div>
</template>

<script>

  export default{
    name:"customerOverview",
    dicts: ['zxcrm_customer_classify', 'zxcrm_customer_level', 'zxcrm_supplier_status', 'zxcrm_payment_cycle', 'zxcrm_supplier_payment_method', 'zxcrm_customer_relationship', 'zxcrm_main_sales_product', 'zxcrm_medicine_payment_method', 'zxcrm_supplier_type', 'zxcrm_customer_status', 'zxcrm_customer_type', 'zxcrm_supplier_level', 'zxcrm_customer_source', 'zxcrm_supplier_source','	zxcrm_input_method'],
    props:{
      form:{
        default:{}
      },
      contactMap:{
        default:{}
      }
    },
    data() {
      return{
        gutter:20,
        // 表单校验
        rules: {
            companyName: [
              { required: true, message: '公司名称是必填项', trigger: 'blur' }
            ],
            customerLevel: [
              { required: true, message: '客户等级是必填项', trigger: 'blur' }
            ],
            customerType: [
              { required: true, message: '客户类型是必填项', trigger: 'blur' }
            ],
        }
      }
    },
    created(){
      this.reset()
    },
    methods:{

      reset() {
        this.mainSalesProduct = []
        this.basicInfoForm = {
          id: null,
          companyName: null,
          companyAbbreviation: null,
          customerClassify: null,
          customerLevel: null,
          operateAddress: null,
          actualControllerId: null,
          vaccineDepartmentHeadId: null,
          purchaseDockingId: null,
          warehouseOperatorId: null,
          userId: null,
          financeId: null,
          area: null,
          customerType: null,
          competitor: null,
          mainSalesProduct: null,
          customerReloationship: null,
          customerOrganizationalRelationship: null,
          other: null,
          inoculationAmount: null,
          purchaseHeadId: null,
          customerStatus: null,
          customerSource: null,
          customerTransationAnalysis: null,
          specialRequirement: null,
          paymentCycle: null,
          medicinePaymentMethod: null,
          warehouseDelivery: null,
          supplierAbbreviation: null,
          saleHeadId: null,
          saleContactId: null,
          supplierStatus: null,
          supplierSource: null,
          supplierType: null,
          supplierLevel: null,
          supplierOrganizationalRelationship: null,
          supplierPolicySupport: null,
          loanCycle: null,
          supplierPaymentMethod: null,
          dealStatus: null,
          dealTime: null,
          nextContactTime: null,
          inputMethod: null,
          informationCompleteness: null,
          status: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null
        }
        this.resetForm("basicInfoForm")
      },
    }

  }
</script>

<style>
</style>
